<template>
  <el-card class="tag-card">
    <h4><svg-icon name="follow" width="20" height="20"></svg-icon>标签墙</h4>
    <div class="tags">
      <TagItem v-for="item in list" :key="item.tagName" :name="item.tagName" /> 
    </div>
  </el-card>
</template>
<script setup>
import {ref,onMounted} from "vue"
import TagItem from '@/components/TagItem.vue';
import {queryTagList} from "@/api/tag.js"
const list = ref([]);
onMounted(()=>{
  getList();
})


const getList = async()=>{
 const res =  await queryTagList();
  console.log(res,"res");
  list.value = res.data;
}
</script>
<style lang="scss" scoped>
:deep .el-card__body {
  padding: 0;
}
.tag-card {
  padding: 10px;
  margin-top: 20px;
  &:hover {
    box-shadow: 1px 1px 10px 5px $shadowcolor;
    h4 {
        background-size: 30% 4px;
    }
  }

  h4 {
    display: flex;
    :deep svg {
      vertical-align: -4px;
      margin-right:5px;
    }
    padding-bottom: 10px;
    background-image:linear-gradient(0deg, #000,#000);
    background-repeat: no-repeat;
    background-size:10% 4px;
    background-position: left bottom;
    transition:background .5s ease-out;
  }
  .tags {
    margin-top:10px;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
